<template>

  <div class="content" ref="content">
    <div
      :class="item.ref"
      :ref="item.ref"
      v-for="(item, index) in pageList"
      :key="index"
    >
      <h1
        class="animate__animated animate__delay-2s"
        :class="{ animate__fadeInDown: current == index + 1 }"
      >
        {{ item.title }}
      </h1>
      <h2
        class="animate__animated animate__delay-3s"
        :class="{ animate__fadeInDown: current == index + 1 }"
      >
        {{ '我是最牛的'+item.title }}
      </h2>
    </div>
  </div>
</template>

<script>
import _ from "lodash";

export default {
  data() {
    return {
      current: 1,
      pageList: [
        { title: "页面1", ref: "page1" },
        { title: "页面2", ref: "page2" },
        { title: "页面3", ref: "page3" },
        { title: "页面4", ref: "page4" },
        { title: "页面5", ref: "page5" },
      ],
    };
  },
  mounted() {},
  methods: {
    // nextPage() {
    //   if (this.current < 5) {
    //     this.current += 1;
    //   } else {
    //     this.current = 1;
    //   }
    //   console.log(this.current);
    //   this.$refs[`page${this.current}`][0].scrollIntoView({
    //     behavior: "smooth", // 定义动画过渡效果， "auto"或 "smooth" 。默认为 "auto"。
    //     block: "center", // 定义垂直方向的对齐， "start", "center", "end", 或 "nearest"。默认为 "start"。
    //     inline: "center", // 定义水平方向的对齐， "start", "center", "end", 或 "nearest"。默认为 "nearest"
    //   });
    // },
  },
};
</script>

<style scoped>

.content {
  width: 100%;
  height: 100%;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
}
.content div {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  scroll-snap-align: center;
  scroll-snap-stop: always;
}
.button {
  position: fixed;
  right: 0;
  padding: 20px 40px;
  border: 1px solid;
}
</style>
